<script lang="ts" setup>
import type { ActReDeploymentVO, QueryActReDeploymentReq } from '@/api/actReDeployment/actReDeploymentType'
import { pageActReDeployment } from '@/api/actReDeployment/actReDeploymentApi'
import useLayoutStore from '@/store/modules/setting'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

// 使用layout组件小仓库
const layoutStore = useLayoutStore()

// 定义响应式数据 processKey 收集查询条件的流程Key
const processKey = ref('')
// 定义响应式数据 currentPage 收集当前页码
const currentPage = ref<number>(1)
// 定义响应式数据 pageSize 收集每页显示的条数
const pageSize = ref<number>(10)
// 定义响应式数据 total 收集总数据条数
const total = ref<number>(0)
// 定义响应式数据 actReDeploymentList 表示流程定义列表
const actReDeploymentList = ref<ActReDeploymentVO[]>([])
// 表格列定义
const tableColumns = [
  { label: '#', type: 'index', align: 'center', width: '50px' },
  { label: 'ID', prop: 'id', align: 'center' },
  { label: '部署名称', prop: 'name', align: 'center' },
  { label: '流程Key', prop: 'key', align: 'center' },
  { label: '部署时间', prop: 'deployTime', align: 'center' },
]

/**
 * onMounted 生命周期钩子函数
 *
 * 在组件挂载完成后执行以下操作：
 * 1. 初始化分页参数和流程名称。
 * 2. 调用函数获取流程定义的分页数据。
 *
 * @param {Function} callback - Vue 的 onMounted 钩子函数的回调，无参数和返回值。
 */
onMounted(() => {
  // 初始化分页参数：当前页为第一页，每页显示10条数据
  currentPage.value = 1
  pageSize.value = 10

  // 初始化流程名称为空字符串
  processKey.value = ''

  // 调用函数获取流程定义的分页数据
  getActReDeploymentPageData()
})

/**
 * 获取流程部署分页数据的异步函数。
 *
 * @function getActReDeploymentPageData
 * @description 该函数用于组装分页查询参数，调用分页接口获取流程部署数据，并处理成功或失败的结果。
 *              如果查询成功，更新流程列表；如果失败，捕获异常并显示错误消息。
 *
 * @returns {Promise<void>} 无返回值，异步操作完成后更新相关状态或显示错误信息。
 */
async function getActReDeploymentPageData() {
  try {
    // 组装分页查询参数，包含部署Key和分页信息
    const queryParams: QueryActReDeploymentReq = {
      processKey: processKey.value,
      pageReq: {
        current: currentPage.value,
        size: pageSize.value,
      },
    }

    // 调用分页接口
    const result: any = await pageActReDeployment(queryParams)

    // 判断查询结果是否成功，成功则更新流程列表和总记录数
    if (result.success && result.code === 200) {
      actReDeploymentList.value = result.data
      total.value = result.total
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示异常错误消息
    ElMessage({
      message: `查询失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}

// 重置查询条件
function resetQuery() {
  layoutStore.refresh = !layoutStore.refresh
}

/**
 * 处理页面数据的函数。
 * 该函数调用获取流程定义页面数据的方法。
 *
 * @function handerPageData
 */
function handerPageData() {
  // 调用获取流程定义页面数据的函数
  getActReDeploymentPageData()
}
</script>

<template>
  <!-- 查询条件区域 -->
  <el-card style="height: 75px;">
    <el-form :inline="true" class="form-inline">
      <el-form-item label="流程Key">
        <el-input
          v-model.trim="processKey"
          placeholder="请输入流程Key"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      <el-form-item>
        <el-button v-hasButton="`btn.actReDeployment.page`" type="primary" icon="Search" @click="getActReDeploymentPageData">
          查询
        </el-button>
        <el-button icon="Refresh" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 查询结果列表区域 -->
  <el-card style="margin: 10px 0px;">
    <el-table style="margin: 10px 0px;" :border="true" :data="actReDeploymentList">
      <!-- ID 区域 -->
      <el-table-column type="selection" align="center" width="50px" />
      <!-- 表格数据 区域 -->
      <el-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :type="column.type"
        :label="column.label"
        :prop="column.prop"
        :align="column.align"
        :width="column.width"
      />
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      layout="prev, pager, next, jumper,->, sizes, total"
      :total="Math.max(total, 0)"
      @current-change="getActReDeploymentPageData"
      @size-change="handerPageData"
    />
  </el-card>
</template>

<style scoped>
.form-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 适配小屏幕 */
}
</style>
